<template>
	<view>
		<view style="background-color: white;padding:20rpx;padding-bottom: 0;">
			<u-search inputAlign="center" placeholder="客户姓名/手机号/单位名称/部门" @search="data=[];form.page=1;getData()"
				@click="data=[];getData()" v-model="form.text" :showAction="false"></u-search>
		</view>
		<view style="background-color: white;">
			<u-dropdown>
				<u-dropdown-item v-model="form.custom_type" title="客户类型" :options="[{label:'个人客户',value:1},{label:'单位客户',value:2}]" @change="form.page=1;data=[];getData()"></u-dropdown-item>
			</u-dropdown>
		</view>
		
		<view style="background-color: white;padding-top: 60rpx;">
			<u-cell-group>
				<u-cell-item :title="item.custom_name" v-for="(item,idx) in data" @click="selectItem=JSON.parse(JSON.stringify(item));show=true">
					<view slot="right-icon" style="display: flex;align-items: center;">
						<text>{{item.custom_tel}}</text>
						<u-tag text="个人" type="primary" mode="light" size="mini" style="margin-left: 10rpx;width: 80rpx;"
							v-if="item.custom_type==1" />
						<u-tag text="单位" type="warning" mode="light" size="mini" style="margin-left: 10rpx;width: 80rpx;"
							v-if="item.custom_type==2" />
					</view>
					<view slot="label" >
						<view v-if="item.custom_type==2">
							<text>{{item.unit_name}}</text>
							<text>｜</text>
							<text>{{item.unit_dept_name}}</text>
						</view>
					</view>
				</u-cell-item>
			</u-cell-group>
		</view>
		<view style="padding: 30rpx 30rpx;background-color: white;position: fixed;bottom: 0;width: 100%;z-index: 999">
			<u-button type="primary" @click="toAddCustom">添加客户</u-button>
		</view>
		<u-toast ref="uToast"></u-toast>
		<u-modal v-model="show" @confirm="selectCustom" title="确定绑定吗？" :show-cancel-button="true">
			<view class="slot-content" style="padding: 30rpx;">
				<view>
					确定绑定客户【{{selectItem.custom_name}}】吗？
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				selectItem:null,
				orders_id:null,
				count: 0,
				refresher: false,
				form: {
					text: '',
					page: 1,
					limit: 20,
					custom_type:''
				},
				data: []
			}
		},
		onLoad(options) {
			console.log(options);
			if(options.orders_id){
				this.orders_id=options.orders_id;
			}
		},
		mounted() {
			var that = this;
			this.getData();
			uni.$on('getCustomList', function(data) {
				that.form.page=1;
				that.data=[];
				that.getData();
			})
		},
		onPullDownRefresh() {
			this.refresherpulling();
		},
		onReachBottom() {
			console.log(this.count);
			if (this.count == 0) {
				this.$refs.uToast.show({
					title: '没那么多客户啦',
					type: "warning"
				});
				return;
			}
			this.scrolltolower();
		},
		methods: {
			toAddCustom(){
				uni.navigateTo({
					url:'/pages/addCostum/addCostum'
				})
			},
			selectCustom(item){
				var that=this;
				that.selectItem.orders_id=this.orders_id;
				that.selectItem.custom_type_name=this.selectItem.custom_type==1?'个人':'单位';
				that.$http.post('/orders/orderBidCustom', that.selectItem, (res) => {
					if (res.data.success) {
						that.$refs.uToast.show({
							title: '绑定成功',
							type: "success"
						});
						uni.$emit('getOrdersInfo',item);
						uni.navigateBack();
					} else {
						that.refs.myModal.show('请求失败', res.data.result.message);
					}
				});
				
			},
			getData() {
				var that = this;
				that.$http.post('/custom/ListByEntity', that.form, (res) => {
					uni.stopPullDownRefresh();
					if (res.data.success) {
						that.data = that.data.concat(res.data.result.list);
						that.count = res.data.result.list.length;
					} else {
						that.refs.myModal.show('请求失败', res.data.result.message);
					}
				});
			},
			refresherpulling(e) {
				this.form.page = 1;
				this.refresher = true;
				this.data = [];
				this.getData();
			},
			scrolltolower(e) {
				this.form.page++;
				this.getData();
			},
		}
	}
</script>

<style>

</style>